<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div style="height:auto;min-height:50px; width:400px">
    <div style="float:left;height:100px;width:100px;background-color: red">
    </div>
    <!--1.out of flow(float,absolute),2(inline-block,table-cell元素),3.block with overflow:非visible     均会创建BFC.-->
    <div style="overflow: auto;background-color: grey;height:200px">BFC有两大性质：块外的元素对快内的布局没有影响，快内的元素也不会干扰快外的布局.看看以下这个float
<div style="float:left;width: 40px;height:40px;background-color: yellow"></div>
</div>
BFC的两点注意事项：margin 折叠处理、float处理与clear
<div style="position:absolute;top:100px;left:50px;height:100px;width:200px;background-color: aqua"></div>
</div>
</body>
</html>